<template>
    <div class="ec-app-container">
        <!-- 查询条件 -->
        <!--<div class="filter-container">-->
            <!--<el-input placeholder="" v-model="listQuery.title" style="width: 200px;" class="filter-item"/>-->
            <!--<el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchList">搜索</el-button>-->
            <!--<el-button class="filter-item" @click="resetSearch">重置</el-button>-->
        <!--</div>-->
        <!-- table -->
        <div>
            <div class="mt-30">
                <el-button class="filter-item" type="primary" @click="addCategory">添加</el-button>
                <!--<el-button class="filter-item" type="primary" @click="searchList">批量上架</el-button>-->
                <!--<el-button class="filter-item" type="primary" @click="searchList">批量下架</el-button>-->
                <!--<el-button class="filter-item" type="primary" @click="searchList">批量移除</el-button>-->
                <!--<el-button class="filter-item" type="primary" @click="handleDownload">导出商品</el-button>-->
            </div>
            <div class="mt-20">
                <el-table
                        v-loading="listLoading"
                        :key="tableKey"
                        :data="list"
                        border
                        fit
                        highlight-current-row
                        @selection-change="handleSelectionChange"
                        style="width: 100%;">
                    <el-table-column
                            type="selection"
                            width="55"/>
                    <el-table-column label="编号" prop="id" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="分类名称" prop="id" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="级别" prop="id" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.level }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品数量" prop="id" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="数量单位" prop="id" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.unitName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否显示" prop="id" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.ifshow == 1 ? '是' : '否' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="id" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.sortOrder }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="id" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="设置" prop="id" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="searchList" />
        </div>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    import { findByPage } from '@/api/category'
    export default {
        name: 'Category',
        components: {
            Pagination
        },
        data() {
            return {
                listLoading: false,
                total: 0,
                list: [],
                listQuery: {
                    title: '',
                    pageSize: 10,
                    pageNum: 1
                },
                multipleSelection: []
            }
        },
        created() {
            // 初始化数据
            this.searchList()
        },
        methods: {
            // 搜索
            searchList() {
                const listQuery = this.listQuery
                this.getList(listQuery)
            },
            getList(listQuery) {
                this.listLoading = true
                findByPage(listQuery).then((res) => {
                    this.listLoading = false
                    this.list = res.data.list ? res.data.list : []
                    this.total = res.data.list ? res.data.total : 0
                })
            },
            // 添加分类
            addCategory() {
                this.$router.push('/shop/addcategory')
            },
            // 选择复选框
            handleSelectionChange(val) {
                this.multipleSelection = val
            }
        }
    }
</script>

<style scoped>

</style>